<template>
  <div class="app-container">
    <el-row>
      <el-button type="text" style="float:left;margin-left:0;color: #1989FA;font-weight:600;" @click="fullFormVisible = !fullFormVisible">
        {{ fullFormVisible ? '收起查询条件' : '展开查询条件' }}
        <i :class="fullFormVisible ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
      </el-button>
    </el-row>
    <div v-show="fullFormVisible">
      <el-form ref="form2" :model="form2" label-width="120px" inline>
        <el-row>
          <el-col :span="21">
            <el-form-item label="重要通道输电情况:" label-width="180px" class="title" />
            <el-form-item label="日期" label-width="50px" :rules="[rule]" prop="dateList">
              <el-date-picker v-model="form2.dateList" type="dates" placeholder="选择一个或多个日期" value-format="yyyy-MM-dd" style="width:160px" @change="val => dateChanged(val, 2)" />
            </el-form-item>
            <el-form-item label="重要通道名称" :rules="[rule]" prop="name">
              <el-select v-model="form2.name" size="medium" placeholder="请选择重要通道名称" filterable clearable style="width:160px">
                <el-option v-for="item in importantChannlOptions" :key="item.value" :label="item.text" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" size="medium" @click="onSubmit2">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="form4" :model="form4" label-width="120px" inline>
        <el-row>
          <el-col :span="21">
            <el-form-item label="联络线潮流:" label-width="180px" class="title" />
            <el-form-item label="日期" label-width="50px" :rules="[rule]" prop="dateList">
              <el-date-picker v-model="form4.dateList" type="dates" placeholder="选择一个或多个日期" value-format="yyyy-MM-dd" style="width:160px" @change="val => dateChanged(val, 4)" />
            </el-form-item>
            <el-form-item label="联络线名称" :rules="[rule]" prop="name">
              <el-select v-model="form4.name" size="medium" placeholder="请选择联络线名称" filterable clearable style="width:160px">
                <el-option v-for="item in lianluoxianOptions" :key="item.value" :label="item.text" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" size="medium" @click="onSubmit4">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="form5" :model="form5" label-width="120px" inline>
        <el-row>
          <el-col :span="21">
            <el-form-item label="非市场化机组出力曲线:" label-width="180px" class="title" />
            <el-form-item label="日期" label-width="50px" :rules="[rule]" prop="dateList">
              <el-date-picker v-model="form5.dateList" type="dates" placeholder="选择一个或多个日期" value-format="yyyy-MM-dd" style="width:160px" @change="val => dateChanged(val, 5)" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" size="medium" @click="onSubmit5">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="form8" :model="form8" label-width="120px" inline>
        <el-row>
          <el-col :span="21">
            <el-form-item label="机组状态及出力:" label-width="180px" class="title" />
            <el-form-item label="日期" label-width="50px" :rules="[rule]" prop="dateList">
              <el-date-picker v-model="form8.dateList" type="dates" placeholder="选择一个或多个日期" value-format="yyyy-MM-dd" style="width:160px" @change="val => dateChanged(val, 8)" />
            </el-form-item>
            <el-form-item label="分类" :rules="[rule]" prop="type">
              <el-select v-model="form8.type" size="medium" placeholder="请选择分类" filterable clearable style="width:160px" @change="typeChanged">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.text" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="名称" label-width="60px" :rules="[rule]" prop="name">
              <el-select v-model="form8.name" size="medium" placeholder="请选择名称" filterable clearable style="width:160px">
                <el-option v-for="item in titleOptions" :key="item.value" :label="item.text" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" size="medium" @click="onSubmit8">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="form9" :model="form9" label-width="120px" inline>
        <el-row>
          <el-col :span="21">
            <el-form-item label="新能源总出力及分类型出力:" label-width="180px" class="title" />
            <el-form-item label="日期" label-width="50px" :rules="[rule]" prop="dateList">
              <el-date-picker v-model="form9.dateList" type="dates" placeholder="选择一个或多个日期" value-format="yyyy-MM-dd" style="width:160px" @change="val => dateChanged(val, 9)" />
            </el-form-item>
            <el-form-item label="数据类型" :rules="[rule]" prop="type">
              <el-select v-model="form9.type" size="medium" placeholder="请选择数据类型" filterable clearable style="width:160px">
                <el-option v-for="item in shujuleixingOptions" :key="item.value" :label="item.text" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" size="medium" @click="onSubmit9">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="form10" :model="form10" label-width="120px" inline>
        <el-row>
          <el-col :span="21">
            <el-form-item label="各交易时段水电总出力:" label-width="180px" class="title" />
            <el-form-item label="日期" label-width="50px" :rules="[rule]" prop="dateList">
              <el-date-picker v-model="form10.dateList" type="dates" placeholder="选择一个或多个日期" value-format="yyyy-MM-dd" style="width:160px" @change="val => dateChanged(val, 10)" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" size="medium" @click="onSubmit10">查询</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="21">
            <el-button :loading="exportLoading" type="warning" size="medium" @click="onExport">数据导出</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <hr>
    <div ref="chartMap0" class="rank-map" />
    <hr>
  </div>
</template>

<script>
import { querycData2, querycData4, querycData5, querycData8, querycData9, querycData10, exportData } from '@/api/spots'
import * as echarts from 'echarts'
import { importantChannlOptions, typeOptions, shijizongOptions, jizushijiOptions, jizuzhuangtaiOptions, feishichangjizuOptions, shujuleixingOptions, lianluoxianOptions } from '@/enum/index'
import { downLoadFile } from '@/utils/download'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      form2: { dateList: [], name: '' },
      form4: { dateList: [], name: '' },
      form5: { dateList: [] },
      form8: { dateList: [], name: '', type: '' },
      form9: { dateList: [], type: '' },
      form10: { dateList: [] },
      fullFormVisible: true,
      rule: { required: true, trigger: 'change', message: '请选择' },
      importantChannlOptions, typeOptions, shijizongOptions, jizushijiOptions, jizuzhuangtaiOptions, feishichangjizuOptions, shujuleixingOptions, lianluoxianOptions,
      titleOptions: [],
      option: {},
      exportLoading: false,
      chartMap0: null,
      labelMap: {
        2: '重要通道输电情况',
        4: '联络线潮流',
        5: '非市场化机组出力曲线',
        8: '机组状态及出力',
        9: '新能源总出力及分类型出力',
        10: '各交易时段水电总出力'
      }
    }
  },
  mounted() {
    this.option = {
      title: {
        text: '现货数据折线图'
      },
      tooltip: {
        trigger: 'axis',
        formatter(params) {
          let res = params[0].axisValue + '<br>'
          for (let i = 0; i < params.length; i++) {
            res += params[i].marker + '&nbsp;&nbsp' +
            params[i].seriesId + '&nbsp;&nbsp;' +
            params[i].value + '<br>'
          }
          return res
        }
      },
      legend: {
        data: [
          // '非市场化机组出力曲线', '机组状态及出力', '新能源总出力及分类型出力'
        ]
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
          // '00: 15', '00: 30', '00: 45', '01: 00', '01: 15', '01: 30', '01: 45', '02: 00', '02: 15', '02: 30', '02: 45', '03: 00', '03: 15', '03: 30', '03: 45', '04: 00', '04: 15', '04: 30', '04: 45', '05: 00', '05: 15', '05: 30', '05: 45', '06: 00', '06: 15', '06: 30', '06: 45', '07: 00', '07: 15', '07: 30', '07: 45', '08: 00', '08: 15', '08: 30', '08: 45', '09: 00', '09: 15', '09: 30', '09: 45', '10: 00', '10: 15', '10: 30', '10: 45', '11: 00', '11: 15', '11: 30', '11: 45', '12: 00', '12: 15', '12: 30', '12: 45', '13: 00', '13: 15', '13: 30', '13: 45', '14: 00', '14: 15', '14: 30', '14: 45', '15: 00', '15: 15', '15: 30', '15: 45', '16: 00', '16: 15', '16: 30', '16: 45', '17: 00', '17: 15', '17: 30', '17: 45', '18: 00', '18: 15', '18: 30', '18: 45', '19: 00', '19: 15', '19: 30', '19: 45', '20: 00', '20: 15', '20: 30', '20: 45', '21: 00', '21: 15', '21: 30', '21: 45', '22: 00', '22: 15', '22: 30', '22: 45', '23: 00', '23: 15', '23: 30', '23: 45', '24: 00'
        ]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        // {
        //   name: '非市场化机组出力曲线',
        //   type: 'line',
        //   stack: 'Total',
        //   data: ['122.16', '119.70', '121.04', '117.91', '110.10', '108.53', '106.30', '105.41', '106.52', '109.87', '108.53', '107.19', '103.17', '104.96', '98.71', '101.83', '98.71', '98.71', '94.69', '99.82', '101.83', '100.72', '105.18', '105.85', '105.41', '106.52', '108.53', '105.85', '98.26', '96.47', '88.88', '102.06', '107.19', '115.68', '123.72', '139.35', '154.76', '157.22', '171.06', '173.97', '178.21', '176.87', '174.86', '178.43', '186.25', '187.37', '181.34', '178.21', '191.16', '192.06', '186.92', '174.86', '168.38', '163.69', '160.57', '160.79', '148.73', '152.97', '155.21', '150.96', '154.31', '155.88', '154.76', '156.10', '155.65', '144.71', '150.52', '136.00', '132.43', '132.43', '129.30', '130.87', '129.30', '131.76', '122.83', '131.54', '127.52', '127.52', '129.53', '130.20', '130.20', '133.32', '128.86', '128.19', '120.37', '119.03', '118.36', '122.60', '117.02', '113.89', '116.13', '114.79', '112.78', '107.86', '110.54', '108.31']
        // },
        // {
        //   name: '机组状态及出力',
        //   type: 'line',
        //   stack: 'Total',
        //   data: ['-83.95', '-79.90', '-82.81', '-78.67', '-68.73', '-62.66', '-61.42', '-53.06', '-48.66', '-42.42', '-44.97', '-40.83', '-41.89', '-35.82', '-38.37', '-29.48', '-26.31', '-31.59', '-38.28', '-37.49', '-43.74', '-48.14', '-53.06', '-52.36', '-61.69', '-63.10', '-64.68', '-68.46', '-63.45', '-60.63', '-67.67', '-33.44', '-41.01', '-43.47', '-38.02', '-30.10', '-25.08', '-26.31', '-17.34', '-19.10', '-30.98', '-8.89', '-26.22', '-5.37', '-20.33', '-1.14', '-2.99', '-7.48', '-28.60', '-32.12', '-33.18', '-32.74', '-19.01', '-19.36', '-37.66', '-24.55', '-26.14', '-37.40', '-35.46', '-33.62', '-42.06', '-41.18', '-40.30', '-57.38', '-35.11', '-36.08', '-21.38', '-43.65', '-24.55', '-18.74', '-30.80', '-24.55', '-26.93', '-38.98', '-30.01', '-22.35', '-31.59', '-33.35', '-20.15', '-20.24', '-23.85', '-25.78', '-23.85', '-46.99', '-32.30', '-35.55', '-37.05', '-43.12', '-51.22', '-56.14', '-61.86', '-60.54', '-79.20', '-85.80', '-89.94', '-93.19']
        // },
        // {
        //   name: '新能源总出力及分类型出力',
        //   type: 'line',
        //   stack: 'Total',
        //   data: ['106.90', '103.15', '101.28', '103.15', '95.92', '110.92', '98.87', '97.79', '98.87', '101.54', '105.83', '96.72', '99.94', '102.35', '101.01', '101.81', '101.28', '98.87', '106.63', '108.78', '112.53', '114.67', '122.44', '130.75', '134.23', '134.77', '118.69', '115.74', '116.28', '105.30', '106.90', '96.45', '99.67', '99.13', '95.65', '112.26', '109.31', '106.10', '115.21', '116.01', '114.67', '111.99', '122.17', '126.19', '126.73', '125.12', '125.39', '129.41', '133.96', '131.28', '140.39', '134.50', '131.82', '133.70', '131.82', '129.41', '126.19', '127.00', '122.98', '124.32', '127.27', '125.12', '122.44', '130.48', '134.77', '132.89', '126.19', '124.05', '111.99', '107.44', '103.15', '104.49', '107.71', '106.10', '93.51', '92.43', '91.90', '88.68', '93.24', '97.26', '102.35', '102.62', '98.87', '105.83', '101.81', '93.77', '88.42', '89.49', '94.85', '91.90', '105.83', '109.31', '117.08', '113.60', '118.69', '107.71']
        // }
      ]
    }
  },
  methods: {
    onSubmit2() {
      this.$refs.form2.validate((valid) => {
        if (valid) {
          const { dateList, name } = this.form2
          const params = {
            dateList: dateList.join(','),
            name
          }
          querycData2(params).then(response => {
            this.list = response
            this.handleData(2)
            this.renderData()
          })
        }
      })
    },
    onSubmit4() {
      this.$refs.form4.validate((valid) => {
        if (valid) {
          const { dateList, name } = this.form4
          const params = {
            dateList: dateList.join(','),
            name
          }
          querycData4(params).then(response => {
            this.list = response
            this.handleData(4)
            this.renderData()
          })
        }
      })
    },
    onSubmit5() {
      this.$refs.form5.validate((valid) => {
        if (valid) {
          const { dateList } = this.form5
          const params = {
            dateList: dateList.join(',')
          }
          querycData5(params).then(response => {
            this.list = response
            this.handleData(5)
            this.renderData()
          })
        }
      })
    },
    onSubmit8() {
      this.$refs.form8.validate((valid) => {
        if (valid) {
          const { dateList, name, type } = this.form8
          const params = {
            dateList: dateList.join(','),
            name,
            type
          }
          querycData8(params).then(response => {
            this.list = response
            this.handleData(8)
            this.renderData()
          })
        }
      })
    },
    onSubmit9() {
      this.$refs.form9.validate((valid) => {
        if (valid) {
          const { dateList, type } = this.form9
          const params = {
            dateList: dateList.join(','),
            type
          }
          querycData9(params).then(response => {
            this.list = response
            this.handleData(9)
            this.renderData()
          })
        }
      })
    },
    onSubmit10() {
      this.$refs.form10.validate((valid) => {
        if (valid) {
          const { dateList } = this.form10
          const params = {
            dateList: dateList.join(',')
          }
          querycData10(params).then(response => {
            this.list = response
            this.handleData(10)
            this.renderData()
          })
        }
      })
    },
    onExport() {
      if (!this.verifyDateList(this.form2)) return
      this.exportLoading = true
      const { dateList } = this.form2
      const params = {
        dateList: dateList.join(',')
      }
      downLoadFile(exportData(), 'xlsx', params, 'get', () => {
        this.$message({ message: '导出成功', type: 'success' })
        this.exportLoading = false
      })
    },
    dateChanged(val, index) {
      if (val) {
        this.form2.dateList = val
        this.form4.dateList = val
        this.form5.dateList = val
        this.form8.dateList = val
        this.form9.dateList = val
        this.form10.dateList = val
      }
    },
    typeChanged(val) {
      this.form8.name = ''
      switch (val) {
        case '实际总出力':
          this.titleOptions = shijizongOptions
          break
        case '机组实际出力':
          this.titleOptions = jizushijiOptions
          break
        case '机组状态':
          this.titleOptions = jizuzhuangtaiOptions
          break
        case '非市场机组出力':
          this.titleOptions = feishichangjizuOptions
          break
        default:
          break
      }
    },
    handleData(index) {
      if (this.list.length > 0) {
        const label = this.labelMap[index]
        if (this.option.legend.data.indexOf(label) === -1) {
          this.option.legend.data.push(this.labelMap[index])
        }
        this.option.xAxis.data = this.list[0].list.map(item => { return item.time })
        for (let i = 0; i < this.list.length; i++) {
          const id = this.list[i].date + '&nbsp;&nbsp;' + label + '&nbsp;&nbsp;' + (this.list[i].name ? this.list[i].name : (this.list[i].type ? this.list[i].type : ''))
          if (this.option.series.every(item => item.id !== id)) {
            this.option.series.push({
              name: label,
              type: 'line',
              id,
              data: this.list[i].list
            })
          } else {
            this.$message.warning('此数据图中已存在')
          }
        }
      } else {
        this.$message.warning('未查到数据')
      }
    },
    renderData() {
      if (!this.chartMap0) {
        this.chartMap0 = echarts.init(this.$refs['chartMap0'])
      }
      this.chartMap0.clear()
      this.chartMap0.setOption(this.option, true)
    },
    verifyDateList(form) {
      if (form.dateList.length === 0) {
        this.$message.warning('导出操作请输入日期查询条件')
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
	font-size: 13px;
	&::before{
		background-color:transparent;
	}
	.el-table__header-wrapper, .el-table__fixed-header-wrapper {
		th {
			word-break: break-word;
			background-color: #f8f8f9;
			color: #484E73;
			height: 40px;
			font-size: 13px;
			font-weight: 600;
			color: #333333;
		}
	}
	.el-table__body-wrapper {
		.el-button [class*="el-icon-"] + span {
			margin-left: 1px;
		}
	}
}
.el-form-item {
  margin-bottom: 16px;
}
.title {
  ::v-deep .el-form-item__label {
    text-align: left;
    padding-right: 0;
  }
}
.rank-map{
  height: 600px;
}
hr{
  border-top: 1px solid #ddd;
  border-bottom: 0;
  margin: 30px 0;
}
</style>
